<template>
	<!-- 撤销报修 -->
	<view class="wrap">
		<view class="reason-header">请选择撤销原因</view>
		<u-radio-group class="reason-group" v-model="value" @change="radioGroupChange" :wrap="true">
					<u-radio
						@change="radioChange" 
					v-for="(item, index) in list" :key="index"
						:name="item.name"
						:disabled="item.disabled"
						:label-disabled="false"
					>
						{{item.label}}
					</u-radio>
		</u-radio-group>
		<view class="reason-header">备注</view>
		<u-input v-model="textValue" :type="type" :border="border" :height="height" :auto-height="autoHeight" :maxlength="1000"/>
		<button class="btn-confirm" type="primary"> 确定撤销 </button>
		<view class="reason-tip">该报修撤销后，在工单列表的回收站里可以看到，但无法再回到列表上，请<text style="color: #fb5151;">慎重撤销</text></view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list: [
						{
							name: '0',
							label: '重复报',
							disabled: false
						},
						{
							name: '1',
							label: '误报',
							disabled: false
						},
						{
							name: '2',
							label: '其他',
							disabled: false
						}
					],
					value:'',
					textValue: '',
					type: 'textarea',
					border: true,
					height: 100,
					autoHeight: true,
			}
		},
		onLoad(option){
			
		},
		methods:{
			radioGroupChange(val){
				console.log('radioGroupChange:',val)
			},
			radioChange(val){
				console.log('radioChange:',val)
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		.reason-header{
			padding: 20rpx 0;
		}
		.btn-confirm{
			width: 100%;
			margin-top: 100rpx;
		}
		.reason-tip{
			text-align: center;
		}
	}
</style>
